<template>
  <div class="card-phone-view" :style="{ transform: 'scale(' + scale + ') translate(-50%, -50%)' }">

    <div class="card-edit-container">
      <template :key="item.itemid + '_' + index" v-for="(item, index) in cardLists">
        <div class="card-unit">
          <!-- 非列表card -->
          <component v-if="!bIsCardTypeOfComb('CARD_' + item.card_type)" :is="'Card' + item.card_type" :item="item"></component>
          <!-- 列表card -->
          <component v-if="bIsCardTypeOfComb('CARD_' + item.card_type)" :is="'Card' + item.card_type" :item="item">

            <div class="card-edit-container">
              <template v-for="(childItem, childIndex) in combCardLists(item)">
                <div v-if="!bIsCardTypeOfComb('CARD_' + childItem.card_type)" :key="childItem.itemid + '_' + childIndex" class="card-unit">
                  <!-- 非列表card -->
                  <component :is="'Card' + childItem.card_type" :item="childItem"></component>
                </div>
              </template>
            </div>

          </component>
        </div>
      </template>
    </div>

  </div>
</template>

<script>
  import CardComponentsGather from '@/views/card/js/mixins/card-components-gather';
  export default {
    mixins: [CardComponentsGather],
    props: {
      cardLists: {
        type: Array,
        default: [],
      },
      scale: Number,
    },
    computed: {
      bIsCardTypeOfComb() {  /* 判断是否属于 组合类card，如 card 11 / card 86 / card 118 等 */
        // 闭包实现传参，不会缓存；但为了归属于参数类，使用此方法
        return (cardType) => {
          return cardType === 'CARD_11'
            || cardType === 'CARD_86'
            || cardType === 'CARD_118';
        }
      },
      combCardLists() {
        return (item) => {
          const itemCard_type = 'CARD_' + item.card_type;
          if(itemCard_type == 'CARD_11') return item.card_group;
          if(itemCard_type == 'CARD_86') return item.sub_cards;
          if(itemCard_type === 'CARD_118') return item.items;
          return null;
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .card-phone-view {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 375px;
    height: 603px;
    background: #f2f2f2;
    transform-origin: 0 0;
    overflow: hidden;
  }

  .card-edit-container {
    position: relative;
    width: 100%;
    // height: 100%;
    //
    flex: 1;
  }

  .card-unit {
    position: relative;
    width: 100%;
    border: 1px solid #f2f2f2;
    // background: #fff;
    margin-bottom: 9px;

    &:last-child {
      margin-bottom: 0;
    }

    &::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 9;
    }
  }
</style>
